<template>
    <div class="main">
        <div style="width: 100%;height: 40px;background-color: #fff;margin-bottom: 20px;padding: 10px;">当前模块:<span
                style="font-weight: bold;">设置本校区开设的教学课程(各年级开班的学科) </span> </div>
        <div class="main-body">

            <div class="main-header float-left">

                <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">


                    <el-form-item label="筛选条件：">
                        <el-select v-model="formInline.nj" placeholder="请选择" clearable>
                            <el-option v-for="(item, index) in ddl_bb_list" :key="index" :label="item.mc"
                                :value="item.dm">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="formInline.xm" placeholder="请输入学生姓名" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>

                    </el-form-item>
                </el-form>
                <!-- </div> -->
            </div>

            <div class="main-center float-left">
                <el-table :data="tableData" height="650" style="width: 100%;margin-top: 6px;"
                    :header-cell-style="{ background: '#fafafa', color: '#000000e0', fontWeight: 600 }">

                    <el-table-column type="index" label="序号" width="100"></el-table-column>
                    <el-table-column prop="nj" label="年级"></el-table-column>
                    <el-table-column prop="bj" label="班级"></el-table-column>
                    <el-table-column prop="xh" label="学号"></el-table-column>
                    <el-table-column prop="xm" label="姓名"></el-table-column>
                    <el-table-column prop="xb" label="性别"></el-table-column>
                    <el-table-column prop="xslb" label="学生类别"></el-table-column>

                    <el-table-column prop="dqzt" label="当前状态"></el-table-column>
                    <el-table-column label="详情" width="180">
                        <template slot-scope="scope" style="z-index: -9999;">
                            <el-button @click="handleView(scope.row)" type="text" size="small" style="color: #ff4d4f;"
                                icon="el-icon-view">详情</el-button>
                            <el-button @click="handleEdit(scope.row)" type="text" size="small" style="color: #ff4d4f;"
                                icon="el-icon-edit">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="footer-pagination">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="formInline.currentPage" :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
                        :page-size="formInline.limit" layout="total, sizes, prev, pager, next, jumper"
                        :total="formInline.total">
                    </el-pagination>
                </div>
            </div>

        </div>


        <el-dialog title="学生信息修改与下载操作窗口" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false">
            <div>
                <div style="width:100%;">
                    <table border='0' cellspacing="0" cellpadding="0"
                        style="border-collapse:collapse;border-style:none;font-family:宋体;font-size:13px; width:100%; ">
                        <tr>
                            <td class="td1" style=" width:100px;">
                                身份证件类型
                            </td>
                            <td class="td1" style=" width:200px;">
                                <span v-text="studentInfo.sfzjlx"></span>
                            </td>
                            <td class="td1" style=" width:100px;">
                                身份证件号码
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.sfzjh"></span>
                            </td>

                        </tr>
                        <tr>
                            <td class="td1">
                                <span style="color: red;">*</span>姓名
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.xm"></span>
                            </td>
                            <td class="td1">
                                性别
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.xb"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                学生类别
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.xslb"></span>
                            </td>
                            <td class="td1">
                                户籍省份
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.hj"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                出生年月
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.csrq"></span>
                            </td>
                            <td class="td1">
                                本市中高考
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.cjzgk"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                就读学校
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.jdxx"></span>
                            </td>
                            <td class="td1">
                                就读校区
                            </td>
                            <td colspan="2" class="td1">
                                <span v-text="studentInfo.xjccx"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                就读年级
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.nj"></span>
                            </td>
                            <td class="td1">
                                编入行政班
                            </td>
                            <td colspan="2" class="td1">
                                <span v-text="studentInfo.bj"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                现居住地址
                            </td>
                            <td colspan="4" class="td1">
                                <el-input v-model="dizhi"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                学生考号
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.xh"></span>
                            </td>
                            <td class="td1">
                                当前状态
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.dqzt"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                联系电话
                            </td>
                            <td colspan="2" class="td1">
                                <span v-text="studentInfo.lxdh"></span>
                            </td>
                        </tr>

                    </table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>

            </span>
        </el-dialog>


        <el-dialog title="学生信息修改与下载操作窗口" :visible.sync="dialogVisible2" width="40%" :close-on-click-modal="false">
            <div>
                <div style="width:100%;">
                    <table border='0' cellspacing="0" cellpadding="0"
                        style="border-collapse:collapse;border-style:none;font-family:宋体;font-size:13px; width:100%; ">
                        <tr>
                            <td class="td1" style=" width:100px;">
                                身份证件类型
                            </td>
                            <td class="td1" style=" width:200px;">
                                <span v-text="studentInfo.sfzjlx"></span>
                            </td>
                            <td class="td1" style=" width:100px;">
                                身份证件号码
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.sfzjh"></span>
                            </td>

                        </tr>
                        <tr>
                            <td class="td1">
                                <span style="color: red;">*</span>姓名
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.xm"></span>
                            </td>
                            <td class="td1">
                                性别
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.xb"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                学生类别
                            </td>
                            <td class="td1">
                                <el-select v-model="dm_xj_xslb" placeholder="请选择">
                                    <el-option v-for="(item, index) in dm_xj_xslbList" :key="index" :label="item.MC"
                                        :value="item.DM">
                                    </el-option>
                                </el-select>

                            </td>
                            <td class="td1">
                                户籍省份
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.hj"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                出生年月
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.csrq"></span>
                            </td>
                            <td class="td1">
                                本市中高考
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.cjzgk"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                就读学校
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.jdxx"></span>
                            </td>
                            <td class="td1">
                                就读校区
                            </td>
                            <td colspan="2" class="td1">
                                <el-select v-model="xiaoqu" placeholder="请选择">
                                    <el-option v-for="(item, index) in schoolList" :key="index" :label="item.XQJC"
                                        :value="item.NEW_XQDM">
                                    </el-option>
                                </el-select>

                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                就读年级
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.nj"></span>
                            </td>
                            <td class="td1">
                                编入行政班
                            </td>
                            <td colspan="2" class="td1">
                                <el-select v-model="gzxiaoqu" placeholder="请选择">
                                    <el-option v-for="(item, index) in banjList" :key="index" :label="item.BJMC"
                                        :value="item.BJNO">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                现居住地址
                            </td>
                            <td colspan="4" class="td1">
                                <el-input v-model="dizhi"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                学生考号
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.xh"></span>
                            </td>
                            <td class="td1">
                                当前状态
                            </td>
                            <td class="td1">
                                <span v-text="studentInfo.dqzt"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td1">
                                联系电话
                            </td>
                            <td colspan="2" class="td1">
                                <span v-text="studentInfo.lxdh"></span>
                            </td>
                        </tr>

                    </table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="tijiapo">提 交</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import httplogin from "../../api/login";
import httpdict from "../../api/dict";
export default {
    name: 'Social',
    data() {
        return {
            xiaoqu: "",
            gzxiaoqu: "",
            xiaoquText: "",
            gzxiaoquText: "",
            nj: "",
            dm_xj_xslbList: [],
            dm_xj_xslb: "",
      
            ruleForm: {
                nj: '',
                jxzzfs: '',
                kcxz: "",
                type: [],

            },
            jxzzfslist: [],
            multipleSelection: [],
            rules: {
                nj: [
                    { required: true, message: '请选择开设课程的年级', trigger: 'change' }
                ],
                jxzzfs: [
                    { required: true, message: '请选择课程的教学组织方式', trigger: 'change' }
                ],
                kcxz: [
                    { required: true, message: '请选择开设课程的性质', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个开设的课程', trigger: 'change' }
                ],

            },
            printOption: {
                id: 'nbprint', // 打印元素的id 不需要携带#号
                popTitle: '教职工基本信息登记表' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
            },
            schoolList: [],
            tableData: [],
            formInline: {
                xq: "",
                nj: '',
                xm: '',
                ddl_xz: '',
                ddl_jdfs: '',
                currentPage: 1,
                limit: 10,
                total: 0
            },
            ddl_lb_list: [

            ],//类别 options
            ddl_bb_list: [],//办别 options
            ddl_xz_list: [
                {
                    value: '全部',
                    label: '全部'
                },
                {
                    value: '普通',
                    label: '普通'
                },
                {
                    value: '工读',
                    label: '工读'
                },
                {
                    value: '特教',
                    label: '特教'
                },
            ],//性质 options
            ddl_jdfs_list: [
                {
                    value: '全部',
                    label: '全部'
                },
                {
                    value: '走读',
                    label: '走读'
                },
                {
                    value: '寄宿',
                    label: '寄宿'
                },
            ],//就读方式 options
            dialogVisible: false,
            dialogVisible2: false,
            JiaoZhiGongInfo: {},
            schoolList: [],
            radioList: [],
            studentInfo: {},
            gzxiaoqu: "",
            banjList: [],
        }
    },
    mounted() {

        this.getGradeway();

    },
    methods: {

        handleDelete(row) {
            var arrId = []
            arrId.push(row.ID)
            var data = {
                ids: arrId
            }
            this.$confirm('此操作将删除记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                httplogin.delSubject(data).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success(res.data.msg, 3);

                        this.getSubjectway()
                    }
                })
            }).catch(() => {

            });

        },
        async tijiapo() {
            if (this.name == "") {
                this.$message({
                    type: 'error',
                    message: "请输入学生姓名"
                });
                return
            }
            var data = {
                sfzjlx: this.studentInfo.sfzlxval,
                sfzjh: this.studentInfo.sfzjh,
                xm: this.studentInfo.xm,
                xbm: this.studentInfo.xbm,
                csrq: this.studentInfo.csrq,
                dqzt: "01",
                lxdh: this.studentInfo.lxdh,
                bj: this.gzxiaoqu,
                xslb: this.dm_xj_xslb,
                // hksf: this.studentInfo.hj,
                xqdm: this.xiaoqu,
                // nj: this.nj,
                bsks: this.dm_jw_ckxz,
                glfs: "1"
            }
            var res = await httplogin.saveStu(data);
            if (res.data.code == 200) {
                this.$message({
                    type: 'success',
                    message: res.data.msg
                });
                this.getSubjectway()
                this.dialogVisible2 = false
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var data = {
                        jxzzfs: this.ruleForm.jxzzfs,
                        nj: this.ruleForm.nj,
                        kcxz: this.ruleForm.kcxz,
                        xq: this.formInline.xq,
                        newXqdm: localStorage.getItem("selXQDM"),
                        kcIds: this.ruleForm.type
                    }
                    httplogin.saveSubject(data).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success(res.data.msg, 3);
                            this.dialogDetails = false
                            this.getSubjectway()
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        async getSubjectway() {
            let data = {
                xqdm: localStorage.getItem("selXQDM"),
                page: this.formInline.currentPage,
                size: this.formInline.limit,
                xm: this.formInline.xm,
                nj: this.formInline.nj,
            }
            let res = await httplogin.selectStu(data);
            if (res.data.code == 200) {
                this.tableData = res.data.data.list;
                this.formInline.total = res.data.data.total
            }
        },

        async getGradeway() {
            let res = await httplogin.getGrade();
            if (res.data.code == 200) {
                this.ddl_bb_list = res.data.data.list
                this.getSubjectway()
            }
        },
        //getGrade

        getNowTimeDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = ('0' + (now.getMonth() + 1)).slice(-2);
            const day = ('0' + now.getDate()).slice(-2);
            // const hours = ('0' + now.getHours()).slice(-2);
            // const minutes = ('0' + now.getMinutes()).slice(-2);
            // const seconds = ('0' + now.getSeconds()).slice(-2);
            const formattedTime = year + "年" + month + "月" + day + "日"
            return formattedTime
        },
        sortPingyinfun(list) {
            list.sort((a, b) => a.XQJC.localeCompare(b.XQJC))
            return list
        },
        //点击查看详情 open 弹框
        handleClick(row) {
            this.getOnGuardFacultyInfoway(row)
            this.dialogDetails = true
        },
        async getOnGuardFacultyInfoway(val) {
            var data = {
                jzgId: val.TeacherID
            }
            var res = await httplogin.getOnGuardFacultyInfo(data)
            if (res.data.code == 200) {
                this.JiaoZhiGongInfo = res.data.data.jzgInfo

            }
        },

        async getAllDistListway() {
            var res = await httplogin.getAllDistList();
            if (res.data.code == 200) {
                this.jxzzfslist = res.data.data.data.dm_jw_jxzzfs
                this.kcxzlist = res.data.data.data.dm_jw_kcxz
                this.ruleForm.jxzzfs = this.jxzzfslist[0].DM
                this.ruleForm.kcxz = this.kcxzlist[0].DM
                this.getIsNotSetSubjectway()
            }
        },
        async getIsNotSetSubjectway() {
            var data = {
                xq: this.formInline.xq,
                nj: this.ruleForm.nj,
                kcxz: this.ruleForm.kcxz,
                jxzzfs: this.ruleForm.jxzzfs,
                gzXqdm: localStorage.getItem("selXQDM")
            }
            var res = await httplogin.getIsNotSetSubject(data);
            if (res.data.code == 200) {
                this.radioList = res.data.data.list
            }
        },
        //close 弹框
        handleClose() {
            this.dialogVisible = false
        },
        handleView(val) {

            this.studentInfo = val;
            this.dialogVisible = true
        },
        handleEdit(val) {
            this.studentInfo = val;
            this.GetCountryway()
            this.getUserPermissionInfofun()
            this.addBanJiFormat()
            this.dialogVisible2 = true
        },
        addBanJiFormat() {
            this.banjList = []
            for (let i = 1; i < 31; i++) {
                var obj = {}
                if (i < 10) {
                    obj = {
                        BJMC: "0" + i + "班",
                        BJNO: "0" + i
                    }
                } else {
                    obj = {
                        BJMC: i + "班",
                        BJNO: i
                    }
                }
                this.banjList.push(obj)


            }
            this.gzxiaoqu = this.studentInfo.bj
        },
        async GetCountryway() {
            var res = await httpdict.getAllDistList();

            if (res.data.code == 200) {
                this.dm_xj_xslbList = res.data.data.data.dm_xj_xslb;
                var obj = this.dm_xj_xslbList.filter((e) => {
                    return e.MC == this.studentInfo.xslb
                })
                this.dm_xj_xslb = obj[0].DM
            }
        },
        async getUserPermissionInfofun() {
            let res = await httplogin.getUserPermissionInfo();
            if (res.data.code == 200) {
                // if (res.data.data.estate == "区级") {
                this.schoolList = res.data.data.UserPermission

                var obj = this.schoolList.filter((e) => {
                    return e.XQJC == this.studentInfo.xjccx
                })
                this.xiaoqu = obj[0].NEW_XQDM



            }
        },

        onSubmit() {
            this.getSubjectway()
            // console.log(this.formInline);
        },
        handleSizeChange(val) {
            this.formInline.limit = val
            this.getSubjectway()
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.formInline.currentPage = val
            this.getSubjectway()
            console.log(`当前页: ${val}`);
        },
        handleSelectionChange(val) {
            this.multipleSelection = []
            for (let i = 0; i < val.length; i++) {
                this.multipleSelection.push(val[i].ID)
            }

        },
        rowdeletes() {
            var data = {
                ids: this.multipleSelection
            }
            this.$confirm('此操作将删除记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                httplogin.delSubject(data).then(res => {
                    if (res.data.code == 200) {
                        this.multipleSelection = []
                        this.$message.success(res.data.msg, 3);

                        this.getSubjectway()
                    }
                })
            }).catch(() => {

            });
        },
    }
}
</script>

<style scoped>
.main {
    width: 100%;
    float: left;
    height: auto;
    box-sizing: border-box;
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;
    overflow-x: auto;
    overflow-y: auto;
}

.main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 12px;
}

.float-left {
    width: 100%;
    height: auto;
    float: left;
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.d-flex {
    display: flex;
    align-items: center;
}

.mr-24 {
    margin-right: 24px;
}

.fontcolor {
    color: rgba(0, 0, 0, 0.88);
    word-break: break-word;
    line-height: 1.5714285714285714;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: 14px;
    box-sizing: border-box;
}

.footer-pagination {
    padding: 10px 0 0 0;
    text-align: right;
}

.font-all {
    color: rgba(0, 0, 0, 0.88);
    font-size: 14px;
    line-height: 1.5714285714285714;
    list-style: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    scrollbar-color: rgba(0, 0, 0, 0.25) rgba(5, 5, 5, 0.06);
}
</style>

<style scoped>
.td1 {
    border: 1px solid #8c8c8c;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #3c3c3c;
    padding: 3px;
    /* width: 40%; */
}

.inputbox {
    text-align: center;
    line-height: 25px;
    border: 1px solid #b3b3b3;
    font-size: 13px;
    height: 25px;
    width: 96%;
}

.rblList td {
    font-size: 13px;
    color: #3c3c3c;
    border-style: none;
    text-align: left;
    height: 30px;
    line-height: 30px;
}

::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

::v-deep .el-dialog__header {
    background-color: #ff4d4f !important;

}

::v-deep .el-dialog__title {
    line-height: 24px;
    font-size: 20px;
    color: #fff !important;
    /* font-weight: 600; */
}
</style>